<template>
  <a-select
    :getPopupContainer="getParentContainer"
    showSearch
    placeholder="请选择定位卡编号"
    optionFilterProp="children"
    :disabled="disabled"
    style="width: 100%"
    @change="handleChange"
    @search="loadData"
    :filterOption="filterOption"
    v-model="selectedValue"
    allowClear
    :notFoundContent="loading ? undefined : null"
  >
    <a-spin v-if="loading" slot="notFoundContent" size="small" />
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>
</template>

<script>
  import {getAction} from '@/api/manage'
  import debounce from 'lodash/debounce'

  export default {
  name: 'SelectCardInput',
  props: {
    disabled: Boolean,
    value: {
      type: String,
      default: '',
      required: false
    },
    popContainer: {
      type: String,
      default: '',
      required: false
    },
    moduleId: {
      type: String,
      default: '',
      required: false
    },
    module: {
      type: Number,
      default: 0
    }
  },
  data() {
    this.loadData = debounce(this.loadData, 800) // 消抖
    return {
      loading: false,
      options: [],
      selectedValue: ''
    }
  },
  created() {
    // this.initData()
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (!val) {
          this.selectedValue = ''
        } else {
          this.initData()
          this.initSelectValue(val)
        }
      }
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  methods: {
    initData() {
       this.options = []
      this.$nextTick(() => {
        getAction(
          '/card/tbPersonnelCardInfo/getCardSelectData?moduleId=' + this.moduleId + '&module=' + this.module,
          ''
        )
          .then(res => {
            if (res.success) {
              this.options = res.result
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {})
      })
    },
    handleChange(selectedValue) {
      console.log('selectedValue', selectedValue)
      this.selectedValue = selectedValue
      this.callback()
    },
    loadData(value) {
      if (!value) {
        return
      }
      console.log('数据加载', value)
      this.options = []
      this.loading = true
      getAction(
        '/card/tbPersonnelCardInfo/getCardSelectData?text=' +
          value +
          '&moduleId=' +
          this.moduleId +
          '&module=' +
          this.module,
        ''
      )
        .then(res => {
          this.loading = false
          if (res.success) {
            this.options = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    },
    callback() {
      this.$emit('change', this.selectedValue)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getParentContainer(node) {
      if (!this.popContainer) {
        return node.parentNode
      } else {
        return document.querySelector(this.popContainer)
      }
    },
    initSelectValue(val) {
      this.selectedValue = val
    }
  }
}
</script>
